<script setup lang="ts">
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import { ref, reactive, defineProps, onMounted } from "vue";
import { get, post } from "@/libs/request";
const props = defineProps(["close", "params"]);
const ruleForm = reactive({
  orderId: props.params.orderId,
  expressType: undefined,
  expressCode: undefined,
});
const rules = reactive<FormRules>({
  expressType: [{ required: true, message: "请选择快递类型", trigger: "blur" }],
  expressCode: [{ required: true, message: "请输入快递编号", trigger: "blur" }],
});
const expressListOptions = ref([])
//表单提交
const ruleFormRef = ref<FormInstance>();
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      post("order/deliver", {
        ...ruleForm,
      }).then((res) => {
        if (res.errCode == 0) {
          ElMessage.success(res.errMsg);
          props.close();
        }
      });
    }
  });
};
/**
 * 获取快递方式
 */
const getExpressList = async () => {
  get("express/getList").then((res) => {
    if (res.errCode == 0) {
      expressListOptions.value = res.data;
    }else{
      ElMessage.error(res.errMsg);
    }
  });
};
onMounted(() => {
  getExpressList()
})
</script>
<template>
  <div class="page">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item @click="props.close()">订单列表</el-breadcrumb-item>
      <el-breadcrumb-item>订单发货</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="main">
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80">
        <el-form-item label="快递类型" prop="expressType">
          <el-select v-model="ruleForm.expressType" placeholder="请选择快递类型">
            <el-option v-for="item in expressListOptions" :key="item.value" :label="item.value" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="快递编号" prop="expressCode">
          <el-input v-model="ruleForm.expressCode" placeholder="请输入快递编号" />
        </el-form-item>
        <el-form-item class="active">
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            提交
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>